<template>
    <div class="container-fluid" v-loading="loading">

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header"><h4><a>{{ title }}</a> 消息内容设置</h4></div>
                    <div class="card-toolbar clearfix">
                        <div class="toolbar-btn-action">
                            <a class="btn btn-primary m-r-5 btn-sm" href="javascript:void(0);"
                               v-for="item in contentSetting" @click="addBlock(item.type,item.title)"><i
                                    class="mdi mdi-plus"></i> {{ item.title }}</a>
                        </div>
                    </div>

                    <div class="card-header">
                        <h4 style="width: 120px;">消息内容设置</h4>
                        <el-button size="small" type="primary" @click="handlePush(id)">发送预览</el-button>
                        <el-button size="small" type="primary" @click="handleEditImage()">新增图片</el-button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="width: 100%;margin-top: 20px;">
                            <el-table
                                    :data="list"
                                    style="width: 100%"
                            >
                                <el-table-column
                                        prop="type"
                                        label="类型"
                                        align="center"
                                        width="160">
                                    <template slot-scope="scope">
                                        {{scope.row.typeName}}
                                        <p v-if="scope.row.companyId">公司：{{scope.row.companyName}}</p>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="内容">
                                    <template slot-scope="scope">
                                        <p v-if="scope.row.content">{{scope.row.content}}</p>
                                        <template v-else>
                                            <p v-for="i in (parseInt(scope.row.number))">{{ scope.row.prefix }}{{
                                                scope.row.articleVideo }}标题</p>
                                        </template>

                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="操作"
                                        align="center" width="180">
                                    <template slot-scope="scope">
                                        <el-button size="mini" @click="handleEdit(scope.row)">修改</el-button>
                                        <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除
                                        </el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="sort"
                                        label="排序"
                                        width="120">
                                </el-table-column>

                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--普通的dialog-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="form">
                <el-form-item label="内容" :label-width="formLabelWidth" v-if="isContent">
                    <el-input
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="form.content" style="width:80%;"
                            :rows="8"
                    >
                    </el-input>
                </el-form-item>


                <el-form-item label="关联公司" :label-width="formLabelWidth" v-if="isCompany">
                    <el-autocomplete
                            v-model="form.companyName"
                            :fetch-suggestions="queryCompanyAsync"
                            placeholder="请输入内容"
                            @select="handleSelect"
                            style="width: 100%"
                    ></el-autocomplete>
                    <el-tag
                            v-if="tag.value"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag)">
                        {{tag.value}}
                    </el-tag>
                </el-form-item>

                <el-form-item label="前缀" :label-width="formLabelWidth" v-if="isPrefix">
                    <el-input
                            type="txt"
                            placeholder="请输入前缀"
                            v-model="form.prefix" style="width:80%;">
                    </el-input>
                </el-form-item>

                <el-form-item label="数量" :label-width="formLabelWidth" v-if="isNumber">
                    <el-input
                            type="number"
                            placeholder="请输入数量"
                            v-model="form.number" style="width:80%;">
                    </el-input>
                </el-form-item>

                <el-form-item label="排序" :label-width="formLabelWidth">
                    <el-input
                            type="number"
                            placeholder="请输入内容"
                            v-model="form.sort" style="width:80%;">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="setData">确 定</el-button>
            </div>
        </el-dialog>

        <!--新增图片-->

        <el-dialog title="添加图片" :visible.sync="dialogImageVisible" :close-on-click-modal="false">
            <el-form :model="form">
                <el-form-item label="添加永久图片素材" label-width="160px">
                    <el-upload
                            class="avatar-uploader"
                            action="/api/upload"
                            accept="image/gif, image/jpeg, image/png"
                            :show-file-list="false"
                            :on-success="handleImgUrlSuccess"
                            :before-upload="beforeAvatarUpload">

                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item label="删除图片" label-width="160px">
                    <el-button @click="cancelImage">删除</el-button>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogImageVisible = false">取 消</el-button>
                <el-button type="primary" @click="putData">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import common from '../../api/public.js';
    export default {
        name: "MessageMaterialComponent",
        data() {
            return {
                loading: false,
                id: $('meta[name="id"]').attr('content'),
                contentSetting: [],
                dialogFormVisible: false,
                form: {
                    sort: 1,
                    content: '',
                    type: '',
                    prefix: '',
                    number: '',
                    companyName: '',
                    companyId: '',
                },
                formLabelWidth: "120px",
                dialogTitle: '',
                list: [],
                typeList: [],
                isPrefix: false,
                isNumber: false,
                isContent: false,
                isCompany: false,
                contentType: [],
                numberType: [],
                searchType: [],
                tag: {},
                isEdit: false,
                removeRow: {},
                imageUrl: "",
                dialogImageVisible: false,
                title: ''
            }
        },
        methods: {
            ...common,
            getInfo() {
                let self = this;
                let uri = "message/show-material/" + self.id;
                self.loading = true;
                axios.get(uri).then(function (data) {
                    var result = data.result;
                    self.contentSetting = result.contentSetting;
                    self.list = [];
                    self.typeList = [];
                    var list = result.list;
                    self.list = list;
                    list.forEach((item) => {
                        self.typeList.push(item.type)
                    });

                    self.contentType = result.contentType;
                    self.numberType = result.numberType;
                    self.searchType = result.searchType;
                    self.imageUrl = result.imageUrl;
                    self.title = result.title;

                    self.loading = false;
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            addBlock(type, title) {
                let self = this;
                self.isEdit = false;
                self.isContent = false;
                self.isNumber = false;
                self.isPrefix = false;
                self.isCompany = false;
                self.tag = {};
                self.form.sort = '';
                self.form.content = '';
                self.form.type = '';
                self.form.prefix = '';
                self.form.number = '';
                self.form.companyName = '';
                self.form.companyId = '';

                /*if (type && this.typeList.indexOf(type) !== -1 && type != 'plainText') {
                    self.$message.error("已经添加过该栏目无法添加多个");
                    return;
                }*/
                if (self.contentType.indexOf(type) !== -1) {
                    self.isContent = true;
                }
                if (self.numberType.indexOf(type) !== -1) {
                    self.isNumber = true;
                    self.isPrefix = true;
                }

                if (self.searchType.indexOf(type) !== -1) {
                    self.isCompany = true;
                }

                self.dialogTitle = title;
                self.dialogFormVisible = true;
                self.type = type;
            },
            setData: function () {
                let self = this;

                let sort = parseInt(self.form.sort);

                if (self.isEdit) {
                    this.list.splice(this.list.indexOf(self.removeRow), 1);
                    this.typeList.splice(self.removeRow.type);
                }

                if (self.type && this.typeList.indexOf(self.type) !== -1 && self.type != 'plainText') {
                    self.$message.error("已经添加过该栏目无法添加多个");
                    return;
                }
                /*if (!self.form.sort) {
                    self.$message.error("排序不能为空");
                    return;
                }*/
                let form = {sort: sort, type: self.type};

                if (self.contentType.indexOf(self.type) !== -1) {
                    if (!self.form.content) {
                        self.$message.error("内容不能为空");
                        return;
                    }
                    form.content = self.form.content;
                }
                if (self.numberType.indexOf(self.type) !== -1) {
                    if (!self.form.number) {
                        self.$message.error("数量不能为空");
                        return;
                    }
                    form.number = parseInt(self.form.number);
                    form.prefix = self.form.prefix;
                }
                if (self.searchType.indexOf(self.type) !== -1) {
                    if (!self.form.companyId) {
                        self.$message.error("请选择公司");
                        return;
                    }
                    form.companyId = self.form.companyId;
                }
                this.typeList.push(this.type);
                this.list.push(form);
                self.dialogFormVisible = false;
                self.putData();
            },
            putData() {
                let self = this;
                let uri = "message/content/" + self.id;
                self.loading = true;
                self.dialogImageVisible = false;
                let postData = {body: self.list, imageUrl: self.imageUrl};
                axios.put(uri, postData).then(function (result) {
                    self.getInfo();
                }).catch(function (error) {
                    self.loading = false;
                });
            },
            handleEdit(row) {

                let self = this;
                self.isContent = false;
                self.isNumber = false;
                self.isPrefix = false;
                self.isCompany = false;
                self.tag = {};
                if (row.companyId) {
                    self.tag = {
                        value: row.companyName,
                        id: row.companyId
                    }
                }
                self.form.sort = row.sort;
                self.form.content = row.content;
                self.form.type = row.type;
                self.form.prefix = row.prefix;
                self.form.number = parseInt(row.number);
                self.form.companyName = '';
                self.form.companyId = row.companyId;
                let type = row.type;

                /*if (type && self.typeList.indexOf(type) !== -1) {
                    self.$message.error("已经添加过该栏目无法添加多个");
                    return;
                }*/
                if (self.contentType.indexOf(type) !== -1) {
                    self.isContent = true;
                }
                if (self.numberType.indexOf(type) !== -1) {
                    self.isNumber = true;
                    self.isPrefix = true;
                }

                if (self.searchType.indexOf(type) !== -1) {
                    self.isCompany = true;
                }

                self.dialogTitle = row.title;
                self.dialogFormVisible = true;
                self.type = type;

                self.removeRow = row;//准备移除的数据

                self.isEdit = true;

            },
            handleSelect(item) {
                this.form.companyName = '';
                if (this.form.companyId) {
                    this.$message.error('你已经选择了公司，无需要再选择');
                    return;
                }
                this.form.companyId = item.id;
                this.tag = item;
            },
            handleClose(tag) {
                this.tag = [];
                this.form.companyId = '';
            },
            handleDelete(item) {
                this.list.splice(this.list.indexOf(item), 1);
                this.typeList.splice(item.type);
                this.putData();
            },
            handlePush: function (id) {
                let self = this;

                this.$prompt('请输入手机号码', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /^1[3456789]\d{9}$/,
                    inputErrorMessage: '手机号码格式不正确'
                }).then(({value}) => {
                    let uri = "message/push/" + id + '/' + value;

                    self.loading = true;
                    axios.get(uri).then(function (result) {
                        self.loading = false;
                    }).catch(function (error) {
                        self.loading = false;
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });

            },

            handleEditImage: function () {
                let self = this;
                self.dialogImageVisible = true;
            },
            handleImgUrlSuccess: function (response) {
                let self = this;
                if (response.code === 200) {
                    self.imageUrl = response.url
                }
                console.log(response)
            },
            beforeAvatarUpload: function (item) {
                console.log(item)
            },
            cancelImage: function () {
                this.imageUrl = '';
            }
        },
        mounted() {
            this.getInfo();
            this.queryCompany();
        },
        filters: {}
    }
</script>

<style scoped>
    .m-r-5 {
        margin: 5px;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
